<template>
  <view>
    <view class="leo-list">
      <view>
        <view class="uni-flex uni-row leo-align-items-center leo-space-between leo-list-item" v-for="(item, index) in list"
              :key="index" @click="toExercise(item)">
          <view class="uni-flex uni-row leo-align-items-center">
            <view class="">
              <view class="text-line-height-1 text-16 pingfangbold leo-ellipsis-1 u-type-primary">
                {{ item.num }} {{ item.name }} <text class="fraction">分数为：{{ item.fraction }}</text>
              </view>
              <view class="text-line-height-1 pingfangmedium text-12 leo-ellipsis-1" style="margin-top: 16rpx; color: rgba(156,164,169,1);">
                作答时间：{{ item.gmtCreate }}
              </view>
            </view>
          </view>
          <view class="">
            <u-icon name="arrow-right" color="#bbb" size="28"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <u-loadmore :status="status" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      list:[],
      id: '',
      pageNum: 1,
      total: 0,
      status: ''
    };
  },
  onLoad(e){
    this.id = e.id;
    this.initial();
  },
  onPullDownRefresh(){
    this.initial();
  },
  onReachBottom() {
    this.pageNum = ++ this.pageNum;
    this.status = 'loading';
    if((this.pageNum - 1) * 5 > this.total) {
      setTimeout(() => {
        this.status = 'nomore';
      }, 1000)
    }else {
      this.getList().then(res => {
        this.total = res.data;
        this.list = this.list.concat(res.data);
      });
      this.status = 'loadmore';
    }
  },
  methods: {
    initial(){
      this.pageNum = 1;
      this.total = 0;
      this.getList().then(res => {
        this.total = res.data;
        this.list = res.data;
        uni.stopPullDownRefresh();
      });
    },
    async getList(){
      return await this.$u.api.getFraction(this.pageNum,this.id);
    },
    toExercise(item){
      this.$u.route({
        url: 'pages/exercise_answer/exercise_answer',
        params: {
          id: item.id,
          userId: item.userId
        }
      })
    }
  }
}
</script>

<style lang="scss">
.fraction{
  margin-left: 40rpx;
  color: #ff9900;
}
.leo-list {
  margin: 15rpx 20rpx;
  background: #ffffff;
  .leo-list-item {
    padding: 36rpx 0rpx;
    border-top: #7092d4 2rpx solid;

    &:first-child {
      border-top: #7092d4 2rpx solid;
    }
    &:last-child {
      border-bottom: #7092d4 2rpx solid;
    }
    .icon {
      display: block;
      width: 64rpx;
      height: 64rpx;
    }
  }
}
.uni-flex {
  display: flex;
  flex-direction: row;
}

.uni-flex-item {
  flex: 1;
}

.uni-row {
  flex-direction: row;
}

.uni-column {
  flex-direction: column;
}

.leo-align-items-center {
  align-items: center;
}

.leo-space-between {
  justify-content: space-between;
}

.text-line-height-1 {
  line-height: 1 !important;
}

.text-12 {
  font-size: 25rpx !important;
}
.text-16{
  font-size: 30rpx;
}
.leo-ellipsis-1 {
  display: -webkit-box;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>
